import { useState, useEffect, useMemo } from 'react';
import TableContent from './components/TableContent';
import FormRender from '@/components/FormRender';
import { useResize } from '@/hooks/useResize';
import { getFormItem } from './config.js';
import { listNoticeTypes } from './service.js';

const EntryDocument = () => {

  const [query, setQuery] = useState({});

  const [pages, setPages] = useState({
    current: 1,
    pageSize: 20,
    total: 0,
    pageSizeOptions: [10, 20, 50, 500],
  })

  const [noticeList, setNoticeList] = useState([]); //提醒类型的数据

  //监听变更
  const { el: headerEl, height: headerHeight } = useResize();

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem({
      noticeTypes: noticeList
    });
  }, [noticeList])

  useEffect(() => {
    getListNoticeTypes();
  }, []);

  //获取提醒类型的数据
  const getListNoticeTypes = async () => {
    const { success, data = [] } = await listNoticeTypes();
    if (success) {
      const arr = data.map(v => {
        return {
          label: v.noticeTypeName,
          value: v.noticeType
        }
      })
      setNoticeList(arr);
    }
  };

  //表单渲染组件
  const FormRenderProps = {
    query,
    formArr,
    formConfig: {
      name: 'urgent-remind-form',
      style: { marginBottom: '16px' }
    },
    clickSearch(val) {
      setPages({
        ...pages,
        current: 1
      });
      setQuery(val);
    },
    clickReset() {
      setPages({
        ...pages,
        current: 1
      });
      setQuery({});
    },
  }

  const tableProps = {
    query,
    headerHeight,
    pages,
    setPages,
  };

  return (
    <>
      <div ref={headerEl}>
        <FormRender {...FormRenderProps} />
      </div>
      <TableContent {...tableProps} />
    </>
  );
};

export default EntryDocument;
